import { Component } from "react";
import ReactDOM from "react-dom";

const modalRoot = document.getElementById('modal-root')
export default class MyModal extends Component {
  // constructor(props) {
  //   super(props)
  //   // this.el = document.createElement('div')
  // }
  // componentDidMount() {
  //   modalRoot.appendChild(this.el)
  // }
  // componentWillUnmount() {
  //   modalRoot.removeChild(this.el)
  // }
  render() {
    return (

      // ReactDOM.createPortal(this.props.children, this.el)
      // 也可以直接挂载到Modal-root节点上，createPortal（）的主要作用，就是把元素内容，直接挂载到当前根组件以外的组件上面

      ReactDOM.createPortal(this.props.children, modalRoot)

    )
  }
}
